<template>
	<view>
		<!-- 未登录区域 -->
		<view v-if="!isLogin" class="login-container">

			<uni-section title="欢迎使用这里是芝芝吱!" sub-title="祝您生活愉快吖(*≧︶≦)">
			</uni-section>

			<uni-section title="用户登录" type="line" style="padding: 5%;">

				<view>
					<uni-section title="用户名"><uni-easyinput v-model="loginInfo.username"
							placeholder="请输入用户名/手机号/邮箱"></uni-easyinput>
					</uni-section>

					<uni-section title="密码"><uni-easyinput type="password" v-model="loginInfo.password"
							placeholder="请输入密码"></uni-easyinput>
					</uni-section>

				</view>

				<view class="button-container">
					<button @click="login" type="primary" size="mini" class="login-button">登录</button>
					<button @click="reset" type="warn" size="mini" class="reset-button">重置</button>
				</view>

				<uni-section title="还没有账号？在这里注册" style="margin-top: 10%;" @click="toPage('/pages/my/zhuce')"
					class="underline">
				</uni-section>

				<uni-section title="忘记密码了？点这里找回密码" style="margin-top: 10%;" @click="toPage('/pages/my/zhaohui')"
					class="underline1">
				</uni-section>

			</uni-section>


		</view>

		<!-- 已经登录区域 -->
		<view v-if="isLogin">

			<view class="line"></view>

			<view class="userinfo">

				<view class="image-box" @click="toPage('/pages/my/geren')">
					<image :src="user.logo"></image>
				</view>

				<view>
					<view>
						<view class="greeting">
							<image :src="imageSrc" class="greeting-image"></image>
							<text class="greeting-text">亲爱的{{ user.tbUserInfo.nickname }}</text>
							<text class="greeting-text1">{{ greetingMessage }}</text>
						</view>
					</view>
				</view>

			</view>

			<view @click="toPage('/pages/my/geren')">
				<text :class="{ 'default-text': !user.tbUserInfo.info }"
					class="info">{{ user.tbUserInfo.info || '您还没有填写个人简介哦'}} </text>
			</view>

			<view class="line"></view>

			<!-- 导航栏 -->
			<view class="nav-bar">
				<!-- 导航链接 -->
				<view class="nav-links">
					<view class="nav-item" @click="showRightDrawer">
						<image :src="pics.shezhi" class="nav-icon"></image>
						<text class="nav-text">设置与安全</text>
					</view>

					<view class="nav-item" @click="showLeftDrawer">
						<image :src="pics.kaifa" class="nav-icon"></image>
						<text class="nav-text">开发者信息</text>
					</view>

					<uni-drawer ref="showLeft" class="abc" mode="left" @change="change($event,'showLeft')">
						<view>

							<uni-section title="开发者个人微信" type="circle">
								<image :src="pics.erweima" class="image"></image>
							</uni-section>

							<uni-section title="恩师DarkNightVip的个人网站" type="circle" class="section">
								<uni-link href="https://huhuiyu.top/" text="https://huhuiyu.top/"
									class="links"></uni-link>
							</uni-section>

							<uni-section title="小程序备案号" type="circle" class="section">
								<uni-link href="https://beian.miit.gov.cn/" text="湘ICP备2024089430号-1X"
									class="links"></uni-link>
							</uni-section>


							<uni-section title="关于此小程序" type="circle" class="section">
								<text
									class="links">这只是一个通过调用我老师的教学用API接口写出来的功能测试小程序，其目的在于检测自己的代码能力和熟悉程序的发布流程，从而为未来面向工作打好基础。该小程序在发布后一年以内会完成注销，各位用户在此期间可以随意体验。</text>
							</uni-section>

							<button @click="closeLeftDrawer" class="fixed-bottom" type="primary">
								<text>点此或屏幕空白处退出</text>
							</button>

						</view>
					</uni-drawer>

					<uni-drawer ref="showRight" mode="right" class="abc" :mask-click="false"
						@change="change($event,'showRight')">
						<view>
							<scroll-view scroll-y="true">

								<uni-section title="欢迎来到设置与安全界面!" type="square"></uni-section>

								<view>
									<button @click="closeRightDrawer" class="fixed-bottom1"
										type="primary"><text>点此退出设置</text></button>
								</view>

								<uni-list>

									<uni-list-item :clickable="true" title="修改账户密码" showArrow :thumb="pics.mima"
										thumb-size="base" class="section" @click="toPage('/pages/my/gpassword')" />

									<uni-list-item :clickable="true" title="绑定用户手机" showArrow :thumb="pics.shouji"
										thumb-size="base" :note="user.tbUserInfo.phone"
										@click="toPage('/pages/my/bphone')" />

									<uni-list-item :clickable="true" title="绑定安全邮箱" showArrow :thumb="pics.youxiang"
										thumb-size="base" :note="user.tbUserInfo.email"
										@click="toPage('/pages/my/bemail')" />

									<uni-list-item :clickable="true" title="安全退出登录" showArrow :thumb="pics.tuichu"
										thumb-size="base" @click="showLogoutConfirm" />
								</uni-list>
							</scroll-view>
						</view>
					</uni-drawer>

					<view class="nav-item" @click="showThemeDialog">
						<image :src="pics.zhuti" class="nav-icon"></image>
						<text class="nav-text">切换主题</text>
					</view>

				</view>

			</view>

		</view>


	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		api,
		tools
	} from '../../api/api.js'
	import userstore from '../../store/user.js'
	const {
		update
	} = userstore();

	// url图片
	import {
		storeToRefs
	} from 'pinia'
	import logosStore from '@/store/logos.js'

	const {
		pics
	} = storeToRefs(logosStore())

	const {
		isLogin,
		user
	} = storeToRefs(userstore())


	const loginInfo = ref({
		"username": "",
		"password": ""
	})

	const reset = () => {
		loginInfo.value = {
			"username": "",
			"password": ""
		}
	}

	const login = () => {
		api.post('/auth', loginInfo.value, (data) => {
			const icon = data.success ? 'success' : 'fail'
			uni.showToast({
				title: data.message,
				icon: icon
			})
			update()
		})
	}

	const logout = () => {
		api.delete('/auth', {}, () => {
			update()
		})
	}

	const toPage = (page) => {
		uni.navigateTo({
			url: page
		})
	}

	const greetingMessage = ref('');
	const imageSrc = ref('');

	// 获取当前小时数
	const getCurrentHour = () => {
		const now = new Date();
		return now.getHours();
	};

	// 根据当前小时数生成问候语
	const generateGreeting = () => {
	  const hour = getCurrentHour();
	  if (hour >= 6 && hour < 10) {
	    imageSrc.value = pics.value.zao;
	    return '早上好啊(｡･∀･)ﾉﾞ嗨';
	  } else if (hour >= 10 && hour < 15) {
	    imageSrc.value = pics.value.zhong;
	    return '中午好哦（＾∀＾●)ﾉｼ';
	  } else if (hour >= 15 && hour < 19) {
	    imageSrc.value = pics.value.xiawu;
	    return '下午好吗 o(*￣▽￣*)ブ';
	  } else {
	    imageSrc.value = pics.value.wan;
	    return '晚上好呀(～﹃～)~zZ';
	  }
	};

	// 初始化问候语
	greetingMessage.value = generateGreeting();

	// 设置定时器，每分钟更新一次问候语
	let timer = null;

	const updateGreeting = () => {
		greetingMessage.value = generateGreeting();
	};
	onMounted(() => {
		timer = setInterval(updateGreeting, 60000); // 每分钟更新一次
	});

	onBeforeUnmount(() => {
		clearInterval(timer); // 清理定时器
	});

	const showLogoutConfirm = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗(´･ω･`)？',
			confirmText: '确定',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					logout()
				}
			}
		})
	}

	const showRight = ref(null)
	const showLeft = ref(null)

	const confirm = () => {}

	const showLeftDrawer = () => {
		showLeft.value.open()
	}

	const showRightDrawer = () => {
		showRight.value.open()
	}

	const closeLeftDrawer = () => {
		showLeft.value.close()
	}

	const closeRightDrawer = () => {
		showRight.value.close()
	}

	const change = (e, type) => {
		console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
	}

	const onNavigationBarButtonTap = (e) => {
		if (showLeft.value) {
			this.$refs.showLeft.close()
		} else {
			this.$refs.showLeft.open()
		}
	}

	const showThemeDialog = () => {
		uni.showActionSheet({
			itemList: ['切换到护眼模式', '切换到光亮模式'],
			success: (res) => {
				const currentTheme = uni.getStorageSync('theme');
				if (res.tapIndex === 0 && currentTheme === 'day') {
					uni.setStorage({
						key: 'theme',
						data: 'night',
						success: () => {
							console.log('Switched to night mode');
							applyTheme('night');
						}
					});
				} else if (res.tapIndex === 1 && currentTheme === 'night') {
					uni.setStorage({
						key: 'theme',
						data: 'day',
						success: () => {
							console.log('Switched to day mode');
							applyTheme('day');
						}
					});
				}
			},
			fail: (res) => {
				console.log(res.errMsg);
			}
		});
	};

	// 应用主题的方法
	const applyTheme = (theme) => {
		document.body.className = theme;
	};
</script>


<style scoped>
	.underline {
		opacity: 0.5;
		text-decoration: underline;
		text-decoration-color: #000000;
		text-decoration-thickness: 2px;
	}

	.underline1 {
		opacity: 0.5;
		text-decoration: underline;
		text-decoration-color: red;
		text-decoration-thickness: 2px;
		display: flex
	}

	.login-container {
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #ffffff;
	}

	.card-style {
		width: 300px;
		padding: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

	.button-container {
		display: flex;
		justify-content: space-between;
	}

	.login-button {
		width: 48%;
		background-color: #007bff;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}

	.login-button:hover {
		background-color: #0056b3;
	}

	.reset-button {
		width: 48%;
		background-color: #dc3545;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}

	.reset-button:hover {
		background-color: #c82333;
	}

	.line {
		margin: 2%;
		border: 1px solid #f2fff3;
		width: 100%;
	}

	.userinfo {
		display: flex;
		align-items: center;
	}

	.userinfo image {
		width: 3rem;
		height: 3rem;
	}

	.image-box {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 5%
	}

	.greeting {
		display: flex;
		align-items: center;
	}

	.nav-bar {
		display: flex;
		align-items: center;
	}

	.nav-image {
		width: 40px;
		height: 40px;
		margin-right: 20px;
	}

	.nav-links {
		display: flex;
		flex: 1;
		justify-content: space-around;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}

	.nav-icon {
		width: 24px;
		height: 24px;
		margin-top: 15rpx;
	}

	.nav-text {
		font-size: 14px;
		color: #000000;
		margin-bottom: -25%;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #55ffff;
	}

	.fixed-bottom1 {
		background-color: #55ffff;
	}

	.image {
		width: 60%;
		height: 11rem;
		border-radius: 25%;
	}

	.greeting-text {
		white-space: nowrap;
		font-size: 16px;
		margin-left: 5%;
	}

	.greeting-text1 {
		white-space: nowrap;
		font-size: 16px;
		margin-left: 2%;
		margin-right: -10%;
	}

	.links {
		display: flex;
		flex: 1;
		justify-content: space-around;
		margin-top: 5%;
	}

	.section {
		margin-top: 10%;
	}

	.default-text {
		color: gray;
	}

	.info {
		display: flex;
		flex: 1;
		justify-content: space-around;
	}

	.abc:deep .uni-drawer__content {
		width: 70vw !important;
	}
</style>